<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>哭泣动画</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body> 
<div id="face">
  <div class="tear">
    <!-- 此处一共二十组 -->
    <!-- 第一组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第二组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第三组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第四组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第五组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第六组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第七组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第八组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第九组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第十组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第十一组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第十二组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第十三组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第十四组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第十五组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第十六组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第十七组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第十八组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第十九组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>

    <!-- 第二十组 -->
    <div class="tear_left">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
    <div class="tear_right">
      <div class="drops">
        <div class="drop"></div>
      </div>
    </div>
  </div>

  <div class="eye left">
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
  </div>

  <div class="eye right">
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
    <div class="eyelash"></div>
  </div>
</div>
</body>
</html>
